@import"_reset.scss";
$theme:green;
// 代词 代表使用绿色
$size:5px;
@function double() {
    @return 100px;
}

@mixin jz() {
    position: relative;
    .demo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.box {
    width: 300px;
    height: 300px;
    background-color: pink;
    .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        font-size: $size;
        &:hover {
            background-color: $theme;
        }
    }
}

.bos {
    @include jz();
    width: 500px;
    height: 500px;
    background-color: yellow;
    .demo {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

.bosa {
    @include jz();
    width: 500px;
    height: 500px;
    background-color: yellow;
    .demo {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

.success {
    width: 100px;
    height: 50px;
    border: 1px solid green;
    color: green;
    line-height: 50px;
    text-align: center;
}

.warning {
    @extend .successs;
    border: 1px solid yellow;
    color: yellow;
}

.crear {
    @extend .successs;
    border: 1px solid red;
    color: red;
}